<template>
  <div class="taxCalculate-select-company-wrapper">
    <div style="display: flex; align-items: center; min-height: 24px">
      <i
        class="iconfont icon-gongsi-2-line2x"
        style="margin-right: 8px; font-size: 16px; color: #55565d"
        @click="(e) => e.preventDefault()"
      />
      <span class="font-title" @click="(e) => e.preventDefault()">{{ enterprise }} / {{ selectedName }}</span>
      <a-popover trigger="click" :visible="clicked" @visibleChange="handleClickChange" placement="bottom">
        <i class="iconfont icon-swap2x" style="margin-left: 8px; font-size: 16px; cursor: pointer" @click="(e) => e.preventDefault()" />
        <div slot="content" v-if="clicked">
          <a-input-search style="margin-bottom: 8px" placeholder="请输入企业" @change="onChangeFilter" />
          <a-tree
            :selectedKeys="[value]"
            :expanded-keys="expandedKeys"
            :auto-expand-parent="autoExpandParent"
            :replaceFields="replaceFields"
            :tree-data="dataList"
            @expand="onExpand"
            @select="onChange"
          />
          <!-- <a-tree-select
            v-model="value"
            :tree-data="dataList"
            show-search
            style="width: 270px; display: inline-block"
            placeholder="请选择"
            treeNodeFilterProp="title"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :replaceFields="replaceFields"
            :treeDefaultExpandAll="true"
            @change="onChange"
            dropdownClassName="taxCalculate-select-action-popover"
          >
          </a-tree-select>-->
        </div>
      </a-popover>
    </div>
  </div>
</template>

<script>
import { getCompanyAuthoritiesListAll } from "../../api";
export default {
  data() {
    return {
      expandedKeys: [],
      replaceFields: {
        children: "companyAuthorityList",
        title: "responsibleAuthorityName",
        key: "id",
        value: "id"
      },
      clicked: false,
      autoExpandParent: true,
      dataList: [],
      dataListAll: [],
      enterprise: "",
      selectedName: "",
      value: ""
    };
  },
  created() {
    this.ongGtCompaniesListAll();
  },
  methods: {
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onChange(e, { selected, selectedNodes, node, event }) {
      if (e.length !== 0) {
        this.value = e[0];
        this.enterprise = node.$parent.title;
        this.selectedName = node.title;
        sessionStorage.setItem("taxCalculate/enterprise", this.enterprise);
        sessionStorage.setItem("taxCalculate/selectedName", this.selectedName);
        sessionStorage.setItem("taxCalculate/selectedValue", this.value);
        this.$emit("upDate", e[0]);
      }
      this.handleClickChange(false);
    },
    onChangeFilter(e) {
      if (e.target.value) {
        const value = e.target.value;
        const expandedKeys = this.dataListAll
          .map((item) => {
            if (item.title.indexOf(value) > -1) {
              return item.id;
            }
            return null;
          })
          .filter((item, i, self) => item && self.indexOf(item) === i);
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = true;
      } else {
        this.autoExpandParent = false;
      }
    },
    handleClickChange(visible) {
      this.expandedKeys = [this.value];
      this.clicked = visible;
    },

    generateList(data) {
      for (let i = 0; i < data.length; i++) {
        const node = data[i];
        const id = node.id;
        this.dataListAll.push({ id, title: node.responsibleAuthorityName });
        if (node.companyAuthorityList) {
          this.generateList(node.companyAuthorityList);
        }
      }
    },
    async ongGtCompaniesListAll() {
      try {
        const { data } = await getCompanyAuthoritiesListAll();
        this.dataList = data;
        this.dataList.map((e) => {
          e.responsibleAuthorityName = e.name;
          e.disabled = true;
        });
        this.dataListAll = [];
        this.generateList(this.dataList);
        this.enterprise = sessionStorage.getItem("taxCalculate/enterprise");
        this.selectedName = sessionStorage.getItem("taxCalculate/selectedName");
        this.value = sessionStorage.getItem("taxCalculate/selectedValue");
        if (!this.enterprise && !this.selectedName && !this.value) {
          this.dataList.some((e) => {
            if (e.companyAuthorityList.length > 0) {
              this.enterprise = e.name;
              this.selectedName = e.companyAuthorityList[0].responsibleAuthorityName;
              this.value = e.companyAuthorityList[0].id;
              sessionStorage.setItem("taxCalculate/enterprise", this.enterprise);
              sessionStorage.setItem("taxCalculate/selectedName", this.selectedName);
              sessionStorage.setItem("taxCalculate/selectedValue", this.value);
              return true;
            }
          });
        }
        this.$emit("upDate", this.value);
      } catch (err) {
        console.log("error log --> ", err);
      }
    }
  }
};
</script>

<style lang="scss">
.taxCalculate-select-company-wrapper {
  min-width: 204px;
  .iconfont {
    color: var(--primary);
  }
  .font-title {
    font-size: 16px;
    font-weight: 500;
    color: #55565d;
    line-height: 22px;
  }
  // ::v-deep .ant-select-tree-switcher {
  //       display: none;
  // }
  // ::v-deep .ant-select-tree-node-content-wrapper {
  //   width: 90%;
  //   margin: 0 12px;
  // }
}
.taxCalculate-select-action-popover {
  .ant-select-tree-title {
    color: rgba(0, 0, 0, 0.65) !important;
  }
}
</style>
